<!-- 组件说明 -->
<template>
    <!-- <div class="uploadfile">
    </div> -->
    <div class="list-pic clearfix">
        <div class="pic-box" v-for="(img,index) in uploaddatainit.upimglist" :key="index">
            <img :src="img">
            <div class="close" @click="closepic(index)">
                <img src="">
            </div>
        </div>
        <div class="picupbox" v-if="uploaddatainit.upimglist.length<uploaddatainit.maxnumber">
            <img src="">
            <input type="file" @change="upimgs">
        </div>
    </div>
</template>

<script>
    //import x from ''
    export default {
        name:'uploadfile',
        components: {

        },
        props:{
            uploaddatainit:{
                type:Object,
                value:{
                    upimglist:[],
                    maxnumber:1,
                },
            },
        },
        data () {
            return {

            };
        },
        computed: {

        },
        methods: {
            // 上传图片
            upimgs(e) {
                let that = this;
                // 时间戳文件名
                const aliyunFileKey = new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
                // FormData 对象
                let formFile = new FormData();
                // 其他参数
                formFile.append("OssAccessKeyId", 'LTAI4FmNE7xB2NTaeFxAxXTj');
                formFile.append("policy",
                    'eyJleHBpcmF0aW9uIjoiMjIwMC0wMS0wMVQxMjowMDowMC4wMDBaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF1dfQ=='
                );
                formFile.append("signature", '5r4Zr1NwCEQjSUOm1xuWJkmqNSw=');
                formFile.append("accessKeySecret", 'edI7UHgU0poiQhWnhej58nIqu3K3B2');
                formFile.append("key", aliyunFileKey);
                formFile.append("success_action_status", '200');
                // 文件对象
                formFile.append("file", e.target.files[0]);
                // OSS路径
                let FileController = 'https://zjlwhtestshimingrenzheng.oss-cn-shanghai.aliyuncs.com';
                // XMLHttpRequest 对象
                var xhr = new XMLHttpRequest();
                xhr.open("post", FileController, true);
                // 发送请求
                xhr.send(formFile);
                // 图片返回路径
                let urlRes = 'http://zhulitest.izhuazhou.cn/'
                // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        that.uploaddatainit.upimglist.push(urlRes + aliyunFileKey);
                        that.upimglistchange();
                    }
                }
            },
            // 删除图片
            closepic(index) {
                this.uploaddatainit.upimglist.splice(index, 1);
                this.upimglistchange();
            },
            upimglistchange(){
                this.$emit('_upimglistchange',this.uploaddatainit.upimglist);
            }
        },
        mounted() {

        },
        beforeCreate() {}, //生命周期 - 创建之前
        beforeMount() {}, //生命周期 - 挂载之前
        beforeUpdate() {}, //生命周期 - 更新之前
        updated() {}, //生命周期 - 更新之后
        beforeDestroy() {}, //生命周期 - 销毁之前
        destroyed() {}, //生命周期 - 销毁完成
        activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>

<style lang='less' scoped>
    .pic-box{
        float:left;
        width:1.68rem;
        height:1.68rem;
        margin-right:0.9rem;
        margin-bottom:0.3rem;
        position:relative;
        box-sizing:border-box;
        border:1px dashed #B9B9B9;
        img{
            width:100%;
            height:100%;
            object-fit:contain;
        }
        .close{
            width:0.3rem;
            height:0.3rem;
            position: absolute;
            top:-0.15rem;
            right: -0.15rem; 
        }
    }
    .pic-box:nth-child(3n){
        margin-right:0;
    }
    .picupbox{
        width:1.68rem;
        height:1.68rem;
        float:left;
        margin-bottom:0.3rem;
        position:relative;
        img{
            width:100%;
            height:100%;
        }
        input{
            display:block;
            position:absolute;
            top:0;
            left:0;
            width:1.68rem;
            height:1.68rem;
            opacity: 0;
        }
    }
</style>

<style lang='less'>
//@import url()

</style>